<template>
  <div>
    <avue-drawer v-model="dialogVisible" :width="600" :before-close="handleClose" class="cust_drawer">
      <div class="content">
        <div class="box">
          <div class="custInfoHeader">
            <span class="icon-fanhui goback" @click="closeDrawer"></span>

            <img :src="nowData.logoUrl" class="custLogo" v-if="nowData.logoUrl != ''"/>
            <span v-if="nowData.logoUrl == ''" style="background:#325893;color: white" class="custDefaultTitle">{{nowData.fullname.slice(0,1)}}</span>

            <span class="customer_name">{{nowData.fullname}}</span>
          </div>
          <el-row :gutter="20" style="margin-left:25px">
            <el-col :span="10"><div class="grid-content bg-purple textHid">
              <label class="lable">所属行业：</label>
              <span>{{nowData.belongTo}}</span>
            </div></el-col>
            <el-col :span="14"><div class="grid-content bg-purple textHid">
              <label class="lable">地 址：</label>
              <span>{{nowData.addrs}}</span>
            </div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple textHid">
              <label class="lable">公司电话：</label>
              <span>{{nowData.tel}}</span>
            </div></el-col>
            <el-col :span="14"><div class="grid-content bg-purple textHid">
              <label class="lable">网 址：</label>
              <span>{{nowData.website}}</span>
            </div></el-col>
            <el-col :span="10"><div class="grid-content bg-purple textHid">
              <label class="lable">业务员：</label>
              <span>{{nowData.managerName}}</span>
            </div></el-col>
            <el-col :span="14"><div class="grid-content bg-purple textHid">
              <label class="lable">建档时间：</label>
              <span>{{nowData.createTime}}</span>
            </div></el-col>
          </el-row>
        </div>
        <div class="box" style="padding-left: 30px">
          <div style="overflow:hidden">
            <span class="customer_name">管理信息</span>
          </div>

          <div class="grid-content">
            <label class="lable">客户分组：</label>
            <span>{{nowData.typeName}}</span>
          </div>

          <div class="grid-content">
            <label class="lable">客户标签：</label>
            <el-tag v-for="(item,index) in nowData.custMarkDtos" :key="index" :style="{backgroundColor: item.markColor}" style="margin: 5px; color:white">{{item.markName}}</el-tag>
          </div>

          <div class="grid-content">
            <label class="lable">客户评级：</label>
            <el-rate
              style="display: inline-block"
              disabled
              v-model="nowData.gradeType">
            </el-rate>
          </div>

        </div>
        <div class="box" style="padding-left: 40px">
          <div style="overflow:hidden">
            <span class="customer_name">联系人信息</span>
          </div>
          <el-row :gutter="20" v-if="nowData.custLinkDtos != undefined && nowData.custLinkDtos.length > 0">
            <el-col :span="12" v-for="(item,index) in nowData.custLinkDtos" :key="index"><div class="card">
              <div class="cust_title">
                <span>{{item.linker}}</span>
              </div>
              <div>
                <ul>
                  <li class="textHid">
                    <span>职位：</span><span>{{item.postType}}</span>
                  </li>
                  <li class="textHid">
                    <span>邮箱：</span><span>{{item.email}}</span>
                  </li>
                  <li class="textHid">
                    <span>电话：</span><span>{{item.telFax}}</span>
                  </li>
                </ul>
              </div>
            </div></el-col>
          </el-row>
          <span v-else>暂无联系人</span>
        </div>
        <div class="box tab" style="padding-left: 30px;margin-bottom: 30px">
          <el-tabs v-model="activeName" @tab-click="changeTab">
            <el-tab-pane label="跟进记录" name="follow">
              <div class="tab_box">

                <el-select v-model="modeId" size="small" placeholder="跟进方式" style="width:150px" clearable v-show="timeShow" ref="modeSelect">
                  <el-option
                    v-for="item in followOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>

                <el-select v-model="contacts" size="small" placeholder="联系人" clearable style="width:150px;margin: 0 10px" v-show="timeShow" ref="contaSelect">
                  <el-option
                    v-for="item in custLinkDtos"
                    :key="item.id"
                    :label="item.linker"
                    :value="item.id">
                  </el-option>
                </el-select>

                <el-input
                  type="textarea"
                  @focus="getTime"
                  :rows="3"
                  style="margin-top:20px"
                  :disabled="type == 3"
                  resize="none"
                  v-model="followMessage">
                </el-input>
                <div style="margin-top: 10px" v-if="timeShow">
                  <div style="text-align: right">
                    <el-button type="primary" plain size="small" @click="release">添加</el-button>
                    <el-button size="small" @click="cancel">取消</el-button>
                  </div>
                </div>
              </div>

              <div class="line"></div>

              <div>
                <div style="display: flex;justify-content: space-between">
                  <el-select v-model="timeSort" placeholder="请选择时间排序" size="medium" style="margin: 10px;width:150px" ref="sortSelect">
                    <el-option
                      v-for="item in tiemOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="flowUpType" placeholder="请选择跟进类型" size="medium" style="margin: 10px;width:150px" ref="flowSelect">
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id">
                    </el-option>
                  </el-select>

                  <el-select v-model="contId" placeholder="请选择联系人" size="medium" style="margin: 10px;width:150px" ref="concactSelect">
                    <el-option
                       v-for="item in linkerOptions"
                      :key="item.id"
                      :label="item.linker"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>

                <avue-timeline pending time :time-width="100" class="timeline" v-show="flowUpList.length > 0">
                  <avue-timeline-item v-for="(item,index) in flowUpList" :key="index" :icon="item.icon">
                    <div slot="time">{{item.logTime}}</div>
                    <div slot="content" v-if="item.operType == 3" style="width: 100%">
                      <p style="font-weight: 600; color: black">{{item.emailType}}</p>
                      <p class="mail_content">{{item.operTo}}</p>
                      <p class="mail_content">邮件主题：{{item.operTopic}}</p>
                      <p>{{item.operContent}}</p>
                    </div>
                    <div slot="content" v-else style="width: 100%">
                      <p style="font-weight: 600; color: black" class="mail_content">{{item.operTopic}}</p>
                      <p class="mail_content">{{item.operContent}}</p>
                    </div>
                  </avue-timeline-item>
                </avue-timeline>

                <div v-show="flowUpList.length == 0" class="noData">
                  <span>暂无数据</span>
                </div>

                <el-pagination
                  background
                  layout="prev, pager, next"
                  style="text-align: center"
                  @current-change="floeUpChangePage"
                  :current-page="nowPage"
                  :total="flowUpTotal">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="相关订单" name="aboutOrder">
              <about-order :id="nowData.id" ref="aboutOrder"></about-order>
            </el-tab-pane>
            <el-tab-pane label="邮件统计" name="mailTab">
              <mail-tab :id="custId" ref="mailTab"></mail-tab>
            </el-tab-pane>
            <el-tab-pane label="订单统计" name="orderTab">
              <order-tab :id="custId" ref="orderTab"></order-tab>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="drawer_footer" @click="toDetail">
        <p>查看详情</p>
      </div>
    </avue-drawer>
  </div>
</template>

<script>
    import {queryCust, flowUp, getFlowUp} from '@/api/customer'
    import aboutOrder from '@/components/customer/aboutOrder'
    import {timeDefault} from '@/util/util'
    import mailTab from '@/components/customer/statistics/mail'
    import orderTab from '@/components/customer/statistics/order'
    export default {
        name: "drawer",
        props: ['custId', 'visible', 'iscommon', 'type', 'typeId'],
        data() {
            return {
                nowData:{
                    custLinkDtos:[]
                },
                flowUpList:[],
                activeName: 'follow',
                nowPage: 1,
                flowUpTotal: 0,
                dialogVisible: true,
                followMessage: '', // 跟进记录
                timeShow: false,
                orderData: [],
                orderTotal: 0,
                orderPage: 1,
                contacts:'',
                modeId:'', // 跟进方式Id
                tiemOptions: [{
                    value: 'ASC',
                    label: '时间正序'
                },
                    {
                        value: 'DESC',
                        label: '时间倒序'
                    }
                ],
                followOptions:[
                    {
                        id:'5',
                        label:'快速记录'
                    },
                    {
                        id:'6',
                        label:'电话'
                    },
                    {
                        id:'7',
                        label:'会面'
                    },
                    {
                        id:'8',
                        label:'社交'
                    }
                ],
                timeSort:'DESC',
                flowUpType:'0',
                typeOptions:[
                    {
                        id:'0',
                        label:'全部'
                    },
                    {
                        id:'3',
                        label:'邮件'
                    },
                    {
                        id:'5',
                        label:'快速记录'
                    },
                    {
                        id:'6',
                        label:'电话'
                    },
                    {
                        id:'7',
                        label:'会面'
                    },
                    {
                        id:'8',
                        label:'社交'
                    }
                ],
                contId:0,
                contactId:'', // 联系人Id
                linkerOptions:[],
                custLinkDtos:[]
            }
        },
        created() {
            this.init()
            this.dialogVisible = this.visible
        },
        components: {
            orderTab,
            mailTab,
            aboutOrder
        },
        watch:{
            timeSort() {
                this.nowPage = 1
                this.init()
            },
            flowUpType() {
                this.nowPage = 1
                this.init()
            },
            contId() {
                this.nowPage = 1
                this.init()
            }
        },
        methods: {
            init() {
                queryCust(this.custId).then(res => {
                    if(res.data.success) {
                        this.nowData = res.data.data
                        this.custLinkDtos = res.data.data.custLinkDtos
                        var arr = [{
                            id:0,
                            linker:'全部'
                        }]
                        this.linkerOptions = arr.concat(this.custLinkDtos)
                    }
                })
                this.getFollow()
            },
            getFollow() {
                getFlowUp(this.custId, this.nowPage,10, this.flowUpContent, this.timeSort,this.flowUpType, this.contId).then(res => {
                    if (res.data.success) {
                        this.flowUpList = res.data.data.records
                        this.flowUpTotal = res.data.data.total
                    }
                })
            },
            changeTab(tab) {
                switch (tab.name) {
                    case 'follow':
                        this.init()
                        break;
                    case 'aboutOrder':
                        this.$refs.aboutOrder.init()
                        break;
                    case 'mailTab':
                        this.$refs.mailTab.init()
                        break;
                    case 'orderTab':
                        this.$refs.orderTab.init()
                        break;
                }
            },
            cancel() { // 取消跟进记录输入
                this.timeShow = false
                this.modeId = ''
                this.contacts = ''
                this.record = ''
            },
            floeUpChangePage(page) {
                this.nowPage = page
                this.getFollow()
            },
            closeDrawer() {
                this.dialogVisible = false
                this.$emit('callback')
            },
            handleClose(hide) {
                this.$emit('callback')
                hide()
            },
            getTime() { // 获取时间
                this.timeShow = true
            },
            release() { // 发布跟进记录
                if(this.followMessage != '') {
                    flowUp(this.followMessage, this.nowData.id, this.modeId, this.contacts).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            })
                            this.followMessage = ''
                            this.nowPage = 1
                            getFlowUp(this.nowData.id, 1,10, this.flowUpContent, this.timeSort,this.flowUpType, this.contactId).then(res => {
                                if (res.data.success) {
                                    this.flowUpList = res.data.data.records
                                    this.flowUpTotal = res.data.data.total
                                }
                            })
                        }
                    })
                } else {
                    this.$message({
                        message:'请输入跟进内容',
                        type:'warning'
                    })
                }
            },
            toDetail(){ // 跳转到详情
                switch (this.type) {
                    case "1":
                        this.$router.push(`/customer/myDetail/${this.custId}`)
                        break;
                    case "2":
                        this.$router.push(`/customer/subordinateDetail/${this.custId}/${this.typeId}`)
                        break;
                    case "3":
                        this.$router.push(`/customer/commonDetail/${this.custId}`)
                        break;
                    case "4":
                        this.$router.push(`/customer/shareDetail/${this.custId}`)
                        break;
                }
            }
        }
    }
</script>

<style lang="scss">
  .cust_drawer{
    background-color:#F5F5F5;
    position:relative;
   .avue-drawer__content{
      overflow: hidden;
      .avue-drawer__body{
        height: calc(100% - 20px);
        overflow-y: hidden;
        /*position: relative;*/
      }
    }
  }
  .timeline{
    .avue-timeline-item-time{
      flex: 0 0 100px !important;
    }
    .avue-timeline-item-content{
      width: calc(100% - 140px);
    }
  }

</style>

<style scoped lang="scss">
  .box{
    background-color: white;
    border-radius: 20px;
    padding:10px;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .noData{
    text-align: center;
    font-weight: 600;
    margin:10px;
  }
  .line{
    height: 1px;
    background-color: #DDDDDD;
    margin-top: 20px;
  }
  .custInfoHeader {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
  }
  .goback{
    color:#409EFF;
    margin-right: 15px;
    cursor: pointer;
  }
  .custLogo{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .custDefaultTitle{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
    text-align: center;
    line-height: 45px;
  }
  .customer_name{
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
  }
  .grid-content{
    margin: 10px 0;
  }
  .lable{
    width: 66px;
    display: inline-block;
  }
  .cust_title{
    color: #2A97F9;
    margin-bottom: 10px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .content{
    height: 100%;
    padding:0 10px;
    box-sizing: border-box;
    overflow-y: auto;
    margin-bottom: -30px;
  }
  .drawer_footer{
    position: absolute;
    border-bottom: 0;
    background-color: #E9F3FD;
    color: #2A97F9;
    text-align: center;
    height: 40px;
    line-height: 40px;
    width: 100%;
    z-index: 99;
    cursor: pointer;
  }
  .card{
    background-color: #E9F3FD;
    border-radius: 8px;
    padding :13px;
    margin: 10px 0;
  }
  .mail_content{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
